<template>
  <div class="app-container">
    <div>
      <el-form :model="form" size="small" :inline="true">
        <el-form-item label="客户名称 :">
          <el-input type="text" placeholder="请输入客户名称" v-model="form.purchaserName"></el-input>
        </el-form-item>
        <el-form-item label="客户编号" prop="businessCode">
          <el-input v-model="form.businessCode" placeholder="请输入客户编号" clearable style="width: 240px"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="客户类型 :">
          <el-select v-model="form.mold" placeholder="客户类型" clearable>
            <el-option v-for="dict in dict.type.purchaser_certified_mold" :key="dict.value"
              :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="主账号 :">
          <el-input type="text" placeholder="请输入主账号" v-model="form.memberName"></el-input>
        </el-form-item>
        <el-form-item label="充值订单号 :">
          <el-input type="text" placeholder="请输入充值订单号" v-model="form.outOrderNo"></el-input>
        </el-form-item>
        <!--
        <el-form-item label="时间 :">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
            type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        -->
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-button size="mini" @click="guideOutExcel()" round>导出Excel</el-button>
      <el-divider></el-divider>
      <el-table :data="tableData" border style="width: 100%" tooltip-effect="dark">
        <el-table-column label="客户名称" align="center" width="320" :show-overflow-tooltip="true" prop="purchaserName"> </el-table-column>
        <el-table-column label="客户编号" align="center" prop="businessCode"> </el-table-column>
        <el-table-column label="客户类型" align="center" prop="moldLabel">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.purchaser_certified_mold" :value="scope.row.mold" />
          </template>
        </el-table-column>
        <el-table-column label="登录账号" align="center" prop="memberName"> </el-table-column>
        <el-table-column label="钱包余额" align="center" prop="memberWallet"></el-table-column>
        <el-table-column label="操作" width="360" align="center">
          <template slot-scope="scope">
            <el-button @click="rechargeBtn(scope.row)" size="small"
              v-hasPermi="['member:wallet:recharge:add']">充值</el-button>
            <el-button @click="rechargeRecord(scope.row,'充值记录')" size="small"
              v-hasPermi="['member:wallet:recharge:page']">充值记录</el-button>
            <el-button @click="rechargeLog(scope.row,'查看充值日志')" size="small"
              v-hasPermi="['member:wallet:log:page']">钱包日志</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="params.pageNum"
        :limit.sync="params.pageSize" @pagination="getData" />
    </div>

    <!-- 充值 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag title="充值"
      :visible.sync="dialogVisible1" width="35%">
      <el-form label-position="right" label-width="150px">
        <el-form-item label="请输入充值金额：">
          <el-input class="recharge" type="number" min="0.01" v-model="rechargeMoney" />
        </el-form-item>
        <el-form-item label="充值说明：">
          <el-input class="recharge" type="textarea" v-model="rechargeDesc" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="dialogVisible1 = false">取消</el-button>
        <el-button type="success" @click="rechargeDetermineBtn">充值</el-button>
      </span>

    </el-dialog>

    <!-- 查看充值记录 -->
    <el-dialog v-dialogDragWidth v-dialogDragHeight v-dialogDrag :title="DialogTitle"
      :visible.sync="dialogVisible2" width="50%">
      <div class="search">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleDialog">搜索 </el-button>
        <el-button icon="el-icon-refresh" @click="resetDialog">重置</el-button>
      </div>
      <div v-if="DialogTitle=== '充值记录'">
        <el-table :data="rechargeMoneyRecord" border>
          <el-table-column label="账号" align="center" prop="memberName"> </el-table-column>
          <el-table-column label="充值时间" align="center" prop="createTime"> </el-table-column>
          <el-table-column label="充值订单号" align="center" prop="rechargeSn"> </el-table-column>
          <el-table-column label="充值金额" align="center" prop="rechargeMoney"> </el-table-column>
          <el-table-column label="充值后余额" align="center" prop="memberWallet">
          </el-table-column>
        </el-table>
        <pagination v-show="total1>0" :total="total1" :page.sync="params.pageNum"
          :limit.sync="params.pageSize" @pagination="rechargeRecords" />
      </div>
      <div v-if="DialogTitle=== '查看充值日志'">
        <el-table :data="rechargeMoneyLog" border>
          <el-table-column label="时间" width="200" align="center" prop="createTime">
          </el-table-column>
          <el-table-column label="充值方式" align="center" prop="detail"> </el-table-column>
          <el-table-column label="变动" width="100" align="center" prop="money"> </el-table-column>
          <el-table-column label="余额" width="100" align="center" prop="memberWallet">
          </el-table-column>
        </el-table>
        <pagination v-show="total1>0" :total="total1" :page.sync="params.pageNum"
          :limit.sync="params.pageSize" @pagination="rechargeLogs" />
      </div>
    </el-dialog>
    <!-- 查看充值日志 -->
    <!-- <el-dialog title="充值日志" :visible.sync="dialogVisible3" width="50%">
      <div class="search">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索 </el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </div>
<el-table :data="rechargeMoneyLog" border>
          <el-table-column label="时间" width="200" align="center" prop="createTime">
          </el-table-column>
          <el-table-column label="详细" align="center" prop="detail"> </el-table-column>
          <el-table-column label="变动" width="100" align="center" prop="money"> </el-table-column>
          <el-table-column label="余额" width="100" align="center" prop="memberWallet">
          </el-table-column>
        </el-table>
        <pagination v-show="total2>0" :total="total2" :page.sync="pageNum2" :limit.sync="pageSize2"
          @pagination="rechargeLogs" />
    </el-dialog> -->
  </div>
</template>

<script>
import { getMemberWalletList, Recharge, getMemberWalletRecord, getMemberWalletLog } from '@/api/purchaser/electronicWallet.js'

export default {
  name: 'ElectronicWallet',
  dicts: [
    "purchaser_certified_mold",
    "purchaser_apply_status"
  ],
  data () {
    return {
      form: {
        purchaserName: '',
        mold: '',
        memberName: '',
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      //
      id: '',
      memberId: '',
      // 记录分页总数量
      total1: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      // 充值 数额
      rechargeMoney: '',
      // 充值记录
      rechargeMoneyRecord: [],
      // 充值日志
      rechargeMoneyLog: [],
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      // 列表 分页 总数量
      total: 0,
      //
      dateRange: [],
      DialogTitle: '',
      rechargeDesc: '',
    };
  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据列表
    getData () {
      // this.addDateRangeWithMap(this.form, this.dateRange, "CreateTime")
      getMemberWalletList({
        purchaserName: this.form.purchaserName,
        businessCode: this.form.businessCode,
        memberName: this.form.memberName,
        outOrderNo: this.form.outOrderNo,
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
          this.tableData.forEach(i => {
            this.dict.type.purchaser_certified_mold.forEach(jj => {
              if (i.mold === jj.value) this.$set(i, 'moldLabel', jj.label)
            })
          })
        }
      })
    },
    // 充值
    rechargeBtn (row) {
      this.memberId = row.memberId
      this.id = row.id
      this.dialogVisible1 = true
    },
    // 充值 确定 按钮
    rechargeDetermineBtn () {
      Recharge(this.memberId, { id: this.id, rechargeMoney: this.rechargeMoney, desc: this.rechargeDesc }).then(res => {
        this.dialogVisible1 = false
        this.getData()
        this.memberId = ''
        this.id = ''
      })
    },
    // 充值记录列表
    rechargeRecord (row, val) {
      this.dialogVisible2 = true
      this.memberId = row.memberId
      this.DialogTitle = val
      this.dateRange = []
      this.rechargeRecords()
    },
    rechargeRecords () {
      getMemberWalletRecord(this.memberId, this.addDateRangeWithMap(this.params, this.dateRange, "CreateTime")).then(res => {
        if (res.code === 200) {
          this.rechargeMoneyRecord = res.rows
          this.total1 = res.total
        }
      })
    },
    // 充值日志
    rechargeLog (row, val) {
      this.dialogVisible2 = true
      this.memberId = row.memberId
      this.DialogTitle = val
      this.dateRange = []
      this.rechargeLogs()
    },
    rechargeLogs () {
      getMemberWalletLog(this.memberId, this.addDateRangeWithMap(this.params, this.dateRange, "CreateTime")).then(res => {
        if (res.code === 200) {
          this.rechargeMoneyLog = res.rows
          this.total1 = res.total
        }
      })
    },
    // 弹出框 搜索 充值
    handleDialog () {
      if (this.DialogTitle === '查看充值日志') {
        this.rechargeLogs()
      }
      if (this.DialogTitle === '充值记录') {
        this.rechargeRecords()
      }
    },
    resetDialog () {
      this.params = {}
      this.dateRange = []
      if (this.DialogTitle === '查看充值日志') {
        this.rechargeLogs()
      }
      if (this.DialogTitle === '充值记录') {
        this.rechargeRecords()
      }
    },



    //搜索按钮
    handleQuery () {
      this.getData()
    },
    //重置按钮
    resetQuery () {
      this.form = {}
      this.getData()
    },
    //导出
    guideOutExcel () { },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  top: 10px;
  .search {
    margin: 5px;
    .el-button {
      height: 35px;
      margin-left: 20px;
    }
  }
  .recharge {
    width: 80%;
    margin-right: 50px;
  }
}
</style>
